<template>
  <div id="saleEcharts" style="height:170px;"></div>
</template>
<script>
    import * as echarts from "echarts";
    export default {
        props:{
            data:{
                type:Array,
                default:new Array()
            }
        },
        data() {
            return {
                saleEcharts: null
            }
        },
        created() {
            this.data.map(i=>{
                i.value = i.singular;
                i.name = i.gameName;
            });
            this.$nextTick(() => {
                this.saleEcharts = echarts.init(document.getElementById('saleEcharts'), "macarons");
                this.saleEcharts.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                    },
                    series: [
                        {
                            name: "销售渠道",
                            type: "pie",
                            data: this.data,
                            animationEasing: "cubicInOut",
                            animationDuration: 1000,
                        }
                    ]
                });

                let that = this;
                window.addEventListener('resize',  ()=> {
                    that.saleEcharts.resize()
                });
            })
        }
    }
</script>
